<template>
  <div class="tree-item">
    <div class="left" :class="{ bold: isroot }">
      {{ item.name }}
    </div>
    <div class="right">
      <span class="manager">{{ item.manager }}</span>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <el-dropdown-item command="view" v-if="!isroot"
            >查看部门</el-dropdown-item
          >
          <el-dropdown-item command="del" v-if="!isroot"
            >删除部门</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
// 导入接口
import { delDeptAPI } from '@/api/department'
export default {
  name: 'TreeItem',
  props: {
    item: {
      type: Object,
      default: function () {
        return {
          name: '江苏传智播客教育科技股份有限公司',
          manager: '负责人'
        }
      }
    },
    // 让调用者传入一个标记，有这个标记代表是在顶部，没有就代表不在顶部
    isroot: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    async handleCommand (cmd) {
      switch (cmd) {
        case 'add':
          // 做添加子部门
          this.$emit('add', this.item.id)
          break
        case 'view':
          // 做查看部门
          this.$emit('view', this.item.id)
          break
        case 'del':
          // 做删除
          // 弹出确认框
          try {
            await this.$confirm('此操作将永久删除该部门, 是否继续?', '是否删除', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })

            // 点了确定就发请求，因为点了取消会进到catch
            await delDeptAPI(this.item.id)
            // 弹出提示
            this.$message.success('删除成功')
            // 刷新数据 - 子传父
            this.$emit('del')
          } catch {}

          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  .bold {
    font-weight: 700;
  }
  .right {
    .manager {
      margin-right: 30px;
    }
  }
}
</style>
